<template>
	<Card>
		<view class="title u-margin-top-30  u-margin-left-30">
			{{data.title}}
		</view>
		<u-grid :border="false" :col="4">
			<u-grid-item v-for="(item,index)  in data.items" :key="index" @click="onItem($event,item)">

				<template v-if="item.redNum">
					<view class="badge-wrapper">
						{{item.redNum}}
					</view>
				</template>

				<view class="icon-wrapper u-flex u-row-center">
					<iconfont :name="`custom-icon-${item.icon}`"></iconfont>
				</view>
				<view class="text-wrapper u-margin-top-20">{{item.name}}</view>
			</u-grid-item>

		</u-grid>

	</Card>
</template>


<script>
	import Card from '../components/wrapper.vue'
	export default {
		components: {
			Card
		},
		props: {
			// arr = {title:'',list:[{name:'',icon:'',navUrl:'',permission:[]}]}
			data: {
				type: Object,
				default: () => {}
			},

			isLogin: Boolean,
		},
		data() {
			return {}
		},
		methods: {
			onItem(index, item) {

				if (this.isLogin) {
					wx.navigateTo({
						url: item.navUrl
					})

				} else {
					wx.showToast({
						title: '请登录',
						icon: "error"
					})
				}
			}
		}

	}
</script>

<style lang="scss">
	.icon {
		&-wrapper {
			width: 96rpx;
			height: 96rpx;
			background: #f7f9fa;

			border-radius: 50%;
		}

		&-img {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.badge {
		&-wrapper {
			opacity: 1;
			background: #fa5151;
			border-radius: 8rpx 8rpx 8rpx 0rpx;
			box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(250, 81, 81, 0.40);
			position: absolute;
			padding: 0 10rpx;
			right: 10rpx;
			top: 15rpx;
			color: #fff;
		}
	}

	.title {
		font-weight: 600;
		font-size: 28rpx;
		color: #0F2E4D;
	}

	.text {
		&-wrapper {

			font-size: 24rpx;
			color: #666666;
		}
	}
</style>
